<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">商品详情</view>
			</view> 
		</view> 
		
		<view class="">
			<!-- <image class="back"  @tap.stop="goBack()" src="@/static/public/icon-back.png" mode="widthFix"></image> -->
			<!-- 轮播图 -->
			<uni-swiper-dot :info="info" :current="current" mode="false">
				<view class="swiperBox">
					<view class="swiperBox-wrapper">
						<swiper :indicator-dots="false" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper">
							<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info" :key="index">
								<image :src="item" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
						<!-- <view class="editorbox" v-if="info.length > 0">
							<view class="editorbox-num">{{ current +1 }}</view>
							<view class="editorbox-num">/</view>
							<view class="editorbox-num">{{ info.length }}</view>
						</view> -->
					</view> 
				</view>
			</uni-swiper-dot>
		</view> 
		<!-- 主体 -->
		<view class="details">
			<view class="details-newsBox">
				<view class="numBox">
					<view class="priceBox">
						<view class="price">{{ goodsDetail.price }}</view>
						<view class="oldPrice">原价：¥{{ goodsDetail.vipPrice }}</view>
					</view>
				</view>
				<view class="name">{{ goodsDetail.storeName }}</view>
				<view class="stock">
					<text>库存：{{ goodsDetail.stock }}</text>
					<text>销量：{{ goodsDetail.sales }}</text>
					<text>邮费：{{ goodsDetail.postage }}</text>
				</view>
			</view>
			<!-- <view class="details-wuBox">
				<view class="details-wuBox__item">
					<view class="title">保障：</view>
					<view class="content"></view>
				</view>
				<view class="details-wuBox__item">					
					<view class="title">配送：</view>					
					<view class="content">{{ getIsPostage(goodsDetail.isPostage) }}</view>				
				</view>				
				<view class="details-wuBox__item" v-if="productAddress.length > 0 && (goodsDetail.isPostage == 1 || goodsDetail.isPostage == 3)"				 @tap.stop="$tools.jump('/pages/goods/checkPick')">					
					<view class="title">自提点：</view>					
					<view class="content">{{ productAddress[0].address }}</view>					
						<view class="right">						
						<image src="@/static/shop/next.png" mode="widthFix"></image>					
					</view>				
				</view>
			</view> -->
		</view>
		
		<!-- 店铺信息 -->
		<!-- <view class="shopList" v-if="diyStoreBusiness != null">
			<view class="shopList-wrapper">
				<view class="shopList-list">
					<view class="shopList-list__item">
						<view class="left">
							<view class="imgBox">
								<image :src="diyStoreBusiness.image" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="name">{{ diyStoreBusiness.name }}</view>
								<view class="fen" @tap.stop="call(diyStoreBusiness.mobile)">
									<view class="img">
										<image src="@/static/public/phone.png" mode=""></image>
									</view>
									<text>{{ diyStoreBusiness.mobile }}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="btn" @tap.stop="$tools.jump('/pages/shop/shop',diyStoreBusiness.id)">进店</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="imgDbox">
			<view class="imgTitle">详情介绍</view>
			<!-- <image src="../../static/index/goods-1.png" mode="widthFix"></image> -->
			<rich-text :nodes="description" style="color:#909090;font-size: 28rpx;font-weight: 400;line-height: 50rpx;"></rich-text>
		</view>
		
		<view class="details-bottomBox">
			<view class="details-iten" @tap.stop="$tools.switchTab('/pages/index/index')">
				<image src="@/static/public/index.png" mode=""></image>
				首页
			</view> 
			<view class="details-btn">
				<view class="btn btn-border" @tap.stop="confim(1)">加入购物车</view>
				<view class="btn" @tap.stop="confim(2)">立即购买</view>
			</view>
		</view>
		
		<!-- 弹框 -->
		<uni-popup ref="confimPopup" type="bottom" :animation="true" @change="changePopup($event,'confimPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="modalPayList">
						<view class="modalPayList-wrapper">
							<!-- <view class="modalPayList-header">
								<view class="modalPayList-close"></view>
								<view class="modalPayList-title">选择规格</view>
								<view class="modalPayList-close" @tap.stop="hidePopup('confimPopup')">取消</view>
							</view> -->
							<view class="modalPayList-goods">
								<view class="modalPayList-img">
									<image :src="goodsSkuDetail.image ? goodsSkuDetail.image : goodsDetail.image" mode=""></image>
									<!-- <image src="../../static/index/goods-1.png" mode=""></image> -->
								</view>
								<view class="modalPayList-item">
									<view class="title">{{ goodsSkuDetail.storeName ? goodsSkuDetail.storeName : goodsDetail.storeName }}</view>
									<!-- <view class="title">Mobil美孚1号经典表现SP级金美孚5W-30 4L全合成机油</view> -->
									<view class="stock" v-if="specification">已选：{{ specification }}</view>
									<view class="price">{{ goodsSkuDetail.price ? goodsSkuDetail.price : goodsDetail.price }}</view>
								</view>
							</view>
							<!-- v-if="item.spec_name != '默认'" -->
							<view class="normBox-list" v-for="(item,index) in sku_list" :key="index"
							>
								<view class="normBox-name">{{ item.attrName }}</view>
								<view class="normBox-item">
									<view class="typeName" v-for="(item2,index2) in item.attrValue" :key="index2"
									:class="{'typeName--active' : item.start === index2,'typeName--disabled' : item2.disabled == false}"
									@tap.stop="getCheckType(index,item,index2,item2)">
										{{ item2.attr }} 
									</view>
								</view>
							</view>
							<!-- <view class="normBox-list">
								<view class="normBox-name">提货方式</view>
								<view class="normBox-name">
									<view class="normBox-item">
										<view class="typeName" :class="{'typeName--active' : shippingType == 2}"
										@tap.stop="shippingType = 2">
											自提
										</view>
										<view class="typeName" :class="{'typeName--active' : shippingType == 1}"
										@tap.stop="shippingType = 1">
											邮寄
										</view>
									</view>
								</view>
							</view> -->
							<view class="normBox-list normBox-list--flex">
								<view class="normBox-name">数量</view>
								<view class="operate">
									<view class="imgBox" @tap="redece()" >-</view>
									<input type="number" v-model="num" maxlength="999" disabled="disabled">
									<view class="imgBox" @tap="add()">+</view>
								</view>
							</view>
							<view class="modalPayList-btn" v-if="type == 1" @tap.stop="submit(1)">加入购物车</view>
							<view class="modalPayList-btn" v-else @tap.stop="submit(2)">立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				info: [
					// '../../static/index/goods-1.png','../../static/index/goods-2.png','../../static/index/goods-3.png'
				],
				current: 0,
				type: '',
				num: 1,
				qiniu: {},
				goodsDetail: {},
				description: '../../static/index/banner.png',
				goodsId: '',
				payment: [],
				userInfo: {},
				isShowTime: false,
				introduceImage: [],
				sku_list: [
					// {attrName: '规格',attrValue:[{attr: '500g'},{attr: '1000g'},]},
					// {attrName: '规格',attrValue:[{attr: '500g'},{attr: '1000g'},]},
				],
				goodsSkuDetail: {},
				specification: '',
				arr: [],
				arrSku: [],
				productValue: {},
				productAddress: [],
				diyStoreBusiness: {},
				shippingType: '',
			}
		},
		onLoad(options) {
			this.goodsId = options.value1;
		},
		onShow() {
			this.sku_list = [],
			this.pecification = '';
			this.arr = [];
			this.arrSku = [];
			this.init();
			this.productAddress = [];
			// this.getProductAddress();
		},
		computed: {			
			getIsPostage(){				
				return function(type){					
					switch (type){						
						case 1:							
						return '物流/自提';							
						break;						
						case 2:							
						return '物流';							
						break;						
						case 3:							
						return '自提';							
						break;					
					}				
				}			
			}		
		},
		methods: {
			init(){
				this.getGoodsDetail();
			},
			goBack(){
				this.$tools.back(1);
			},
			submit(index){
				let that = this;
				// that.$tools.jump('./confirmOrder');
				// return;
				// console.log("submit：",that.specification,
				// that.arrSku,that.arrSku.length,that.sku_list.length);
				if(that.arrSku.length != that.sku_list.length){
					console.log("NONONO");
					const arrEnd = that.arrSku.filter(function(item) {
						if(item != null && item != '' && item != '空白'){
							return item
						}
					});
					console.log("arrEnd",arrEnd);
					let n = arrEnd.length;
					return that.$tools.toast('请选择'+that.sku_list[n].attrName);
				}
				if(that.arrSku.length == that.sku_list.length){
					console.log("一样");
					const arrIndex = this.arrSku.findIndex((i) => (i == null || i == '' || i == '空白'));
					console.log("arrIndex：",arrIndex);
					if(Number(arrIndex) > -1){
						return that.$tools.toast('请选择'+that.sku_list[arrIndex].attrName);
					}
				}
				// if(that.shippingType == ''){
				// 	return that.$tools.toast('请选择提货方式');
				// }
				if(that.goodsSkuDetail.stock == 0){
					return that.$tools.toast('库存不足');
				}
				if(index == 1){
					// 加入购物车
					// that.$tools.switchTab('/pages/car/car');
					that.addCar();
				}else if(index == 2){
					that.addConfirm();
					// that.$tools.jump('./confirmOrder',
					// encodeURIComponent(JSON.stringify(that.goodsDetail)),
					// encodeURIComponent(JSON.stringify(that.specification)),
					// encodeURIComponent(JSON.stringify(that.goodsSkuDetail)),
					// that.num);
				}else{
					console.log("goodsSkuDetail:",that.goodsSkuDetail);
					let attrList = [];
					attrList.push({
						cartNum: 1,
						truePrice: that.goodsSkuDetail.price,
						// shippingType: item.shippingType,
						productInfo:{
							image: that.goodsSkuDetail.image,
							storeName: that.goodsDetail.storeName,
							attrInfo: {
								sku: that.goodsSkuDetail.sku
							},
							// deduction: that.goodsSkuDetail.deduction,
						}
					})
					uni.setStorageSync('attrList', attrList);
					uni.setStorageSync('attrId', that.goodsSkuDetail.id);
					that.$tools.back(2);
				}
				that.hidePopup('confimPopup');
			},
			// 打开弹框
			confim(type){
				this.type = type;
				this.openPopup('confimPopup');
			},
			// 立即购买
			addConfirm(){
				var data = {};
				data['productId'] = this.goodsId;
				data['cartNum'] = this.num;
				data['productAttrUnique'] = this.goodsSkuDetail.codeUnique;
				data['isNew'] = '1';
				console.log("data:",data);
				this.$Ajax('/api/order/add',data, res => {
						let cartInfo = [];
						res.data.cartInfo.forEach((item,index) =>{
							cartInfo.push({
								cartNum: item.cartNum,
								truePrice: item.truePrice,
								shippingType: item.shippingType,
								productInfo:{
									image: item.productInfo.image,
									storeName: item.productInfo.storeName,
									attrInfo: {
										sku: item.productInfo.attrInfo.sku
									},
									// deduction: item.productInfo.deduction,
								}
							})
						})
						console.log("cartInfo：",cartInfo);
						this.$tools.jump('./confirmOrder',
						encodeURIComponent(JSON.stringify(res.data.addressInfo)),
						encodeURIComponent(JSON.stringify(cartInfo)),
						// encodeURIComponent(JSON.stringify(res.data.cartInfo)),
						encodeURIComponent(JSON.stringify(res.data.priceGroup)),
						res.data.orderKey);
						this.sku_list.forEach((item, index) => {
							this.$set(item, 'start', null);
						});
						this.shippingType = '';
					}, err => {
					}
				);
			},
			// 加入购物车
			addCar(){
				var data = {};
				data['cartNum'] = this.num;
				data['productId'] = this.goodsId;
				data['productAttrUnique'] = this.goodsSkuDetail.codeUnique;
				data['shippingType'] = this.shippingType; // 1=快递 ，2=门店自提
				this.$Ajax('/api/cart/addCart',data, res => {
						this.$tools.toast('成功添加到购物车');
						this.num = 1;
						this.arr = [];
						this.arrSku = [];
						this.pecification = '';
						this.spec_value = '';
						this.sku_list.forEach((item, index) => {
							this.$set(item, 'start', null);
						});
						this.shippingType = '';
					}, err => {
						
					}
				);
			},
			getCheckType(index,item,index2,item2){
				let that = this;
				// item2.checked = !item2.checked;
				// console.log(index,item,index2,item2,'规格');
				if (item2.disabled == false) {
					return '';
				}
				// 选中
				if(item['start'] === index2){
					item['start'] = null;
					that.arr[index] = null;
					that.arrSku[index] = null;
				}else{
					item['start'] = index2;
					that.arr[index] = item.attrName+'-'+item2.attr;
					that.arrSku[index] = item2.attr;
				}
				that.specification = that.arr.toString();
				console.log("that.specification：",that.specification);
				that.spec_value = (that.arrSku).toString();
				// console.log("that.spec_value：",that.spec_value);
				console.log("that.productValue：",that.productValue);
				
				var option = that.sku_list;
				var result = []; //定义数组存储被选中的值
				for (let i=0;i<option.length; i++) {
					result[i] = that.arrSku[i] ? that.arrSku[i] : '';
				}
				for (let i=0;i<option.length; i++) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k=0;k<option[i].attrValue.length;k++) {
						result[i] = option[i].attrValue[k].attr; //赋值，存在直接覆盖，不存在往里面添加id值
						option[i].attrValue[k].disabled = that.isMay(result); //在数据里面添加字段disabled来判断是否可以选择
					}
					result[i] = last;
				}
				console.log("that.arrSku.length：",that.arrSku.length,"that.arrSku：",that.arrSku);
				console.log(!that.arrSku.includes(null));
				if(!that.arrSku.includes(null) && !that.arrSku.includes('') &&
				!that.arrSku.includes('空白') && that.spec_value.charAt(0) != ',' &&
				(that.arrSku.length == that.sku_list.length)){
					that.goodsSkuDetail = that.productValue[that.spec_value];
					// console.log("that.goodsSkuDetail：",that.goodsSkuDetail);
				}else{
					that.goodsSkuDetail = {};
				}
				
			},
			isMay: function(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				// console.log("result:",result);
				let checkVal = '';
				for (let i=0;i<result.length; i++) {
					if(result[i]){
						checkVal += result[i]+',';
					}
					checkVal;
				}
				// console.log("checkVal:",checkVal);
				let value = checkVal.substring(0, checkVal.length - 1);
				if(JSON.stringify(this.productValue).includes(JSON.stringify(value)) === false){
					// console.log("不存在");
					return false;
				}
				// else{
				// 	console.log("存在");
				// 	true;
				// }
				return this.productValue[value].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
			},
			// 商品详情
			getGoodsDetail() {
				var data = {};
				data['goodsId'] = this.goodsId
				uni.showLoading({
					mask: true
				})
				this.$Ajax('/api/product/goodsDetail',data, res => {
						this.diyStoreBusiness = res.data.diyStoreBusiness;
						this.goodsDetail = res.data.storeInfo;
						if(res.data.storeInfo.sliderImage != null){
							this.info = res.data.storeInfo.sliderImage.split(',');
						}
						if(res.data.storeInfo.description != null){
							this.description = res.data.storeInfo.description.replace(/<img/g, "<img style='width:100%;margin: 15px 0;'")
						}
						this.productValue = res.data.productValue;
						// this.productValue = {
						// 	"16,32":{},
						// 	"16,64":{},
						// 	"32,64":{
						// 		stock: 0,
						// 	},
						// };
						this.sku_list = res.data.productAttr;
						this.sku_list.forEach((item, index) => {
							this.$set(item, 'start', null);
						});
						uni.hideLoading();
					}, err => {
					}, 'GET'
				);
			},
			// 商品自提点
			getProductAddress(){
				var data = {};
				data['productId'] = this.goodsId;
				this.$Ajax('/api/order/getProductAddress',data,res => {
						if (res.code == 200) {
							this.productAddress = res.data;
						}
					}, err =>{
					}, 'GET'
				)
			},
			redece(){
				if(this.num > 1){
					this.num --;
				}else{
					this.num = 1;
				}
			},
			add(){
				this.num ++;
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				// console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesbg{
		position: relative;
		padding-bottom: 120rpx;
	}
	.back{
		position: fixed;
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 100rpx;
		/* #endif */
		left: 30rpx;
		z-index: 9;
		width: 48rpx;
		height: 48rpx;
	}
	.swiperBox {
		width: 100%;
		height: 750rpx;
		position: relative;
		z-index: 8;
		margin: 0;
		@include flexCenter;
		&-wrapper {
			width: 100%;
		}
	
		&-swiper {
			width: 100%;
			height: 750rpx;
	
			&__item {
				width: 100%;
				height: 750rpx;
				overflow: hidden;
				padding: 0;
				border-radius: 0;
				@include flexCenterColumn;
	
				image {
					width: 100%;
					height: 100%;
					border-radius: 0;
				}
			}
		}
	}
	.editorbox{
		background: rgba(0,0,0,0.4);
		border-radius: 40rpx;
		position: absolute;
		right: 22rpx;
		bottom: 24rpx;
		padding: 6rpx 18rpx;
		@include flexCenter;
		&-num{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 0 3rpx;
		}
	}
	
	.details{
		&-newsBox{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 46rpx 34rpx 40rpx;
			margin: 12rpx 30rpx 16rpx;
			.name{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #131414;
				margin: 22rpx 0;
			}
			.numBox{
				@include flexLeft;
				.priceBox{
					@include flexLeft;
					.price{
						font-family: DIN-Bold, DIN-Bold;
						font-weight: 400;
						font-size: 42rpx;
						color: #131414;
						&::before{
							content: '￥';
							font-family: PingFangSC-Semibold, PingFangSC-Semibold;
							font-weight: 400;
							font-size: 26rpx;
							color: #131414;
							margin-top: 8rpx;
						}
					}
					.oldPrice{
						font-family: PingFang SC Regular, PingFang SC Regular;
						font-weight: 400;
						font-size: 26rpx;
						color: #979797;
						margin-left: 20rpx;
						text-decoration: line-through;
					}
					text{
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.integral{
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						&::after{
							content: '聚宝值';
							font-size: 24rpx;
							color: #FFEE8A;
							margin-top: 8rpx;
						}
					}
				}
			}
			.stock{
				@include flexRight;
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #9F9F9F;
					margin-left: 36rpx;
				}
			}
		}
		&-wuBox{
			background: #FFFFFF;
			border-radius: 16rpx;
			@include flexLeftColumn;
			padding: 32rpx 32rpx 30rpx;
			margin: 0 30rpx 16rpx;
			&__item{
				@include flexLeft;
				margin-bottom: 20rpx;
				position: relative;
				width: 100%;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #131414;
					white-space: nowrap;
				}
				.content{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #131414;
					@include initMoreLine(1);
					width: 75%;
				}
				.right{
					position: absolute;
					right: 0;
					width: 30rpx;
					height: 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&-bottomBox{
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(168,179,172,0.1608);
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 12rpx 30rpx 44rpx 50rpx;
			@include flexBetween;
		}
		&-iten{
			@include flexCenterColumn;
			// width: 15%;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
			font-family: PingFangSC-Regular, PingFangSC-Regular;
			font-weight: 400;
			font-size: 24rpx;
			color: #131414;
		}
		&-btn{
			@include flexRight;
			width: 82%;
			.btn{
				background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
				border-radius: 44rpx;
				border: 2rpx solid transparent;
				border-radius: 86rpx;
				padding: 22rpx 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				width: 50%;
				text-align: center;
				// white-space: nowrap;
				&-border{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #565C58;
					background: #FFFFFF;
					border-radius: 44rpx;
					border: 2rpx solid #D7DBD8;
					margin-right: 20rpx;
				}
			}
		}
	}
	
	.brief{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx 20rpx;
		margin: 20rpx 24rpx 20rpx;
		.title{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.4);
		}
	}
	
	.imgDbox{
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 150rpx;
		padding: 26rpx 28rpx;
		height: 100%;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0,0,0,0.4);
		image{
			border-radius: 12rpx;
			width: 100%;
			width: 100%;
			// min-height: 750rpx;
		}
		img{
			width: 100%;
			width: 100%;
		}
		.imgTitle{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #3D3D3D;
			margin-bottom: 18rpx;
		}
	}
	
	
</style>